<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script src="js/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <div style="margin-top: 100px; margin-left: 40%">
      <h2 style="padding-left: 50px">用户登录</h2>
      姓名：<input id="username" type="text" />
      <p></p>
      密码：<input id="password" type="password" />
      <p></p>
      <div style="padding-left: 50px">
        <input type="button" value=" 提 交 " onclick="mySubmit()" />
        &nbsp;&nbsp;
        <input type="reset" value=" 重 置 " onclick="myClear()" />
      </div>
    </div>
    <script>
      // 执行登录操作
      function mySubmit() {
        var username = jQuery("#username");
        var password = jQuery("#password");
        // 1.非空效验
        if (jQuery.trim(username.val()) == "") {
          alert("请先输入姓名！");
          // 让光标显示到姓名处
          username.focus();
          return;
        }
        if (jQuery.trim(password.val()) == "") {
          alert("请先输入密码！");
          password.focus();
          return;
        }
        // 2.将数据提交给后端（SpringBoot）
        jQuery.ajax({
          url: "login",
          type: "POST",
          contentType: "application/json",
          data: JSON.stringify({
            username: username.val(),
            password: password.val(),
          }),
          success: function (data) {
            // {"succ":200,"result":1,"msg":""}
            if (data != null && data.succ == 200 && data.result == 1) {
              alert("登录成功！");
            } else {
              alert(data.msg);
            }
          },
        });
      }
      function myClear() {
        if (confirm("确定清空？")) {
          // 点击了确认按钮
          jQuery("#username").val("");
          jQuery("#password").val("");
        }
      }
    </script>
  </body>
</html>
